<template>
   <div>
      <!-- 没有获取到数据时显示loading -->
      <van-loading
         v-if="!films"
         size="24px"
         >加载中...</van-loading
      >

      <!-- 否则显示数据 -->
      <ul v-else>
         <!-- key的作用：通过一个item的唯一标识提升大列表的渲染性能 -->
         <FilmItem
            v-for="film in films"
            :key="film.filmId"
            :item="film"></FilmItem>
      </ul>
   </div>
</template>

<script>
import { getComings } from "../../api/movieApi";

import FilmItem from "./FilmItem.vue";

export default {
   /* 注册子组件 */
   components: {
      FilmItem,
   },

   data() {
      return {
         films: null,
      };
   },

   /* 组件挂载时获取数据 */
   mounted() {
      getComings().then(films => {
         setTimeout(() => {
            this.films = films;
         }, 1000);
      });
   },
};
</script>

<style lang="scss" scoped>
.van-loading {
   text-align: center;
   background-color: rgba(0, 0, 0, 0.05);
   height: 40px;
   line-height: 40px;
}
</style>
